﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <script type="text/javascript">
        function calX(lng, z) {
            return Math.floor(Math.pow(2, z - 1) * (lng / 180 + 1));
        }

        function calY(lat, z) {
            let x = Math.tan(Math.PI * lat / 180);
            let y = 1 / Math.cos(Math.PI * lat / 180);
            //let q = Math.Log(x + y) / Math.PI;
            let q = Math.log(x + y, Math.E) / Math.PI;
            return Math.floor(Math.pow(2, z - 1) * (1 - q));
        }


        function onload() {
            let div = document.getElementById("tile");
            let zoom = 8;
            let minLng = 63;
            let maxLng = 145;
            let minLat = -7;
            let maxLat = 63;

            minLng = 70;
            maxLng = 138;
            minLat = 0;
            maxLat = 58;


            //已知经纬度(单位：度)，求瓦片编号x,y：
            let minX = calX(minLng, zoom);
            let maxX = calX(maxLng, zoom);
            let minY = calY(minLat, zoom);// 起始y
            let maxY = calY(maxLat, zoom); // 终止y

            let tmp = 0;
            if (minX > maxX) {
                // 如果出现minX > maxX的情况
                tmp = minX;
                minX = maxX;
                maxX = tmp;
            }
            maxX += 1;

            if (minY > maxY) {
                //如果出现minY > maxY的情况
                tmp = minY;
                minY = maxY;
                maxY = tmp;
            }
            minY += 1;

            console.info('Z:' + zoom + '  X:' + minX + ' - ' + maxX + ' Y:' + minY + ' - ' + maxY);

            let html = "", url;
            let first = true;

            for (let y = minY; y < maxY; y++) {
                if (first) {
                    for (let x = minX; x < maxX; x++) {
                        url = 'http://127.0.0.1:8080/api/v1/tiles/' + zoom + '/' + x + '/' + y + '.png';
                        html += '<img src="' + url + '" style="display:inline-block;width: 256px; height: 256px;">';
                    }
                    first = false;
                }
                else {
                    for (let x = minX; x < maxX; x++) {
                        url = 'http://127.0.0.1:8080/api/v1/tiles/' + zoom + '/' + x + '/' + y + '.png';
                        html += '<img src="' + url + '" style="display:inline-block;width: 256px; height: 256px;margin-top:-4px">';
                    }
                }
                html += '<br />';
            }

            div.outerHTML = html;
        }
    </script>
</head>
<body onload="onload()" style="width: 200000px; height: 900px; overflow-x: auto; overflow-y: auto">
    <div id="tile">
        <!--<img style="margin-left:10px;margin-top:20px;display:inline-block" />-->

    </div>
</body>
</html>